<template>
	<div class="warp">
		<img src="https://s1.hdslb.com/bfs/static/jinkela/mstation-h5/asserts/bannerTop_new.png" class="bgcimg" />
		<div class="dv">
			<div class="dv2">
				<div class="left">
					<img :src="userdata.user_img" alt="" v-if="userdata.user_img" />
					<img src="../../assets/default_img.jpg" v-else />
					<div class="name_gender">
						<div>{{ username }}</div>
						<div v-if="userdata.gender == 1" class="genderImg">
							<svg class="icon" aria-hidden="true" fill="currentColor"><use xlink:href="#icon-male"></use></svg>
						</div>
					</div>
				</div>

				<div class="right">
					<div class="right_span">
						<div class="fans">
							<span class="num">0</span>
							<span>粉丝</span>
						</div>
						<div class="fans">
							<span class="num">13</span>
							<span>关注</span>
						</div>
						<div class="fans">
							<span class="num">0</span>
							<span>获赞</span>
						</div>
					</div>
					<div class="editbtn" @click="getinfo">编辑资料</div>
				</div>
			</div>
			<div class="dv3">
				<p class="p1" v-if="userdata.user_desc">{{ userdata.user_desc }}</p>
				<p class="p11" v-else>{{ desc }}</p>
				<div class="line"></div>
				<p class="p2">
					<span :class="{ active: flag1 }" @click="flagshow1">动态</span>
					<span :class="{ active: flag2 }" @click="flagshow2">视频</span>
					<span :class="{ active: flag3 }" @click="flagshow3">相簿</span>
				</p>
				<div class="line2"></div>
			</div>
		</div>
		<div class="imgBottom">
			<img src="https://s1.hdslb.com/bfs/static/jinkela/mstation-h5/asserts/noContent.png" alt="" class="noneImg" />
			<div class="flagtext">
				<p v-if="flag1" class="flagfont">到达动态的尽头惹~</p>
				<p v-if="flag2" class="flagfont">Ta还没有投过稿~</p>
				<p v-if="flag2" class="flagfont">
					快去发现
					<span class="active" @click="getHome">新内容</span>
					吧!
				</p>
				<p v-if="flag3" class="flagfont">这个人很神秘，相簿里什么都没有</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			flag1: true,
			flag2: false,
			flag3: false,
			desc: '这个人很神秘，什么都没有写'
		};
	},
	methods: {
		getinfo() {
			this.$router.push('/edit');
		},
		flagshow1() {
			this.flag1 = true;
			this.flag2 = false;
			this.flag3 = false;
		},
		flagshow2() {
			this.flag1 = false;
			this.flag2 = true;
			this.flag3 = false;
		},
		flagshow3() {
			this.flag1 = false;
			this.flag2 = false;
			this.flag3 = true;
		},
		getHome() {
			this.$router.push('/');
		}
	},
	props: ['username', 'userdata']
};
</script>

<style scoped>
.warp {
	background-color: white;
}
.bgcimg {
	width: 100%;
	height: 163px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 7px;
	z-index: -1;
}
.dv {
	height: 235px;
	background-color: white;
	margin-top: 87px;
	padding: 0 13px;
}
.dv2 {
	height: 121px;
	/* border: 1px solid black; */
	display: flex;
	justify-content: space-between;
}
.dv3 {
	height: 108px;
	/* border: 1px solid red; */
	position: relative;
}
.left {
	display: flex;
	/* border: 1px solid red; */
	flex-direction: column;
	padding: 0 0 6px 8px;
	margin-top: -10px;
}
.left img {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	/* margin-bottom: 8px; */
}
.right {
	/* border: 1px solid black; */
	display: flex;
	width: 230px;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.right_span {
	display: flex;
	/* border: 1px solid black; */
	margin: 15px;
	margin-left: 25px;
	margin-bottom: 8px;
	width: 220px;
}
.fans {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 72px;
	height: 32px;
	/* border: 1px solid black; */
	justify-content: center;
	align-items: center;
}
.fans span {
	display: block;
	color: #999;
	font-size: 12px;
}
.num {
	color: #212121 !important;
	font-size: 14px !important;
}
.editbtn {
	width: 210px;
	height: 30px;
	border: 1px solid #fb7299;
	color: #fb7299;
	font-size: 14px;
	border-radius: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 33px;
}
.p1 {
	font-size: 13px;
	color: #999999;
	margin-left: 9px;
}
.p11 {
	height: 18px;
	font-size: 13px;
	color: #999999;
	margin-left: 8px;
}
.p2 {
	font-size: 13px;
	color: #757575;
	margin-top: 23px;
	margin-left: 8px;
}
.p2 span {
	margin-right: 32px;
}
.line {
	width: 373px !important;
	border-bottom: 1px solid #e7e7e7;
	position: absolute;
	left: -12px;
	bottom: 78px;
}
.line2 {
	width: 373px !important;
	border-bottom: 1px solid #e7e7e7;
	position: absolute;
	left: -12px;
	bottom: 38px;
}
.active {
	color: #fb7299;
}
.noneImg {
	width: 280px;
	height: 160px;
	/* border: 1px solid red; */
}
.name_gender {
	display: flex;
	margin-top: 12px;
	margin-left: 0px;
	justify-content: center;
	align-items: center;
	color: #212121;
	font-size: 4.8vw;
	letter-spacing: 1px;
}
.genderImg {
	margin-left: 5px;
	margin-top: 5px;
}
.imgBottom {
	height: 280px;
	padding-bottom: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.flagfont {
	font-size: 4.26667vw;
	color: #999;
}
.flagtext {
	margin-top: 20px;
	letter-spacing: 1px;
}
</style>
